<template>
    <el-dialog v-model="dialogVisible" title="编辑成员" width="450" :close-on-click-modal="false" @close="handleClose">
        <el-form v-loading="isLoading" :model="form" label-width="auto" label-position="right" ref="formRef"
            label-suffix=":">
            <el-form-item label="用户名" props="username">
                {{ form.username || '-' }}
            </el-form-item>
            <el-form-item label="用户昵称" props="nickname">
                {{ form.nickname || '-' }}
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="form.role_id" clearable style="min-width: 200px">
                    <el-option v-for="role in roleList" :label="role.name" :value="role.id"
                        :disabled="role.type === 'admin'" />
                </el-select>
            </el-form-item>
            <el-form-item label=" 加入时间" props="join_time">
                {{ formatDayTime(form.join_time) || '-' }}
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleSubmit">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import { getProjectMemberDetail, getRoleListApi, updateProjectMemberDetail } from '@/common/apis/projectMember/index.ts';
import { formatDayTime } from '@/common/utils/datetime.ts';

interface Props {
    id: number;  // 用户id
    modelValue: boolean;  // 是否显示弹框
}

const route = useRoute();
const props = defineProps<Props>();
const roleList = ref([]);
const formRef = ref(null);
const isLoading = ref(false);

const dialogVisible = computed(() => {
    return props.modelValue;
});

const form = ref({
    username: '',
    nickname: '',
    role_id: '',
    join_time: '',
    role_name: ''
});

const handleInit = async () => {
    isLoading.value = true;
    try {
        const { data: roleListData } = await getRoleListApi({ projectId: Number(route.params.id) });
        roleList.value = roleListData;
        const { data: memberData } = await getProjectMemberDetail({
            id: props.id, projectId: Number(route.params.id)
        });
        form.value = memberData;
    } catch (error) {
    } finally {
        isLoading.value = false;
    }
};

watch(() => dialogVisible.value,
    val => {
        if (dialogVisible.value && props.id) {
            handleInit();
        }
    }
);

// 添加必要的函数
const emit = defineEmits(['update:modelValue', 'changed']);

const handleClose = () => {
    form.value = {
        username: '',
        nickname: '',
        role_id: '',
        join_time: ''
    };
    formRef.value?.resetFields();
    emit('update:modelValue', false);
};

const handleSubmit = async () => {
    const params = {
        id: props.id,
        project_id: Number(route.params.id),
        ...form.value
    };
    const res = await updateProjectMemberDetail(params);
    ElMessage.success({ message: `${res.message}` });
    emit('changed');
    handleClose();
};
</script>